<script>
	import request from './common/request';
	import config from './common/config';
	export default {
		globalData: {
			connected: false
		},
		data() {
			return {
				connected: false,
				connecting: false,
				msg: false,
				roomId: ''
			}
		},
		methods: {
			connect() {
				if (this.connected || this.connecting) {
					uni.showModal({
						content: '正在连接或者已经连接，请勿重复连接',
						showCancel: false
					})
					return false
				}
				this.connecting = true
				uni.showLoading({
					title: '连接服务器中...'
				})
				uni.connectSocket({
					url: config.wsHost,
					// #ifdef MP
					header: {
						'content-type': 'application/json'
					},
					// #endif
					// #ifdef MP-WEIXIN
					method: 'GET',
					// #endif
				})
				uni.onSocketOpen((res) => {
					this.connecting = false
					this.connected = true
					getApp().globalData.connected = true
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '服务器连接成功!'
					})
					// 如果有token,则更新websocket连接信息
					// 即：使用token登录websocket,
					// websocket online +1
					let token = uni.getStorageSync('token')
					console.log('token', token)
					if (token) {
						request.ws('/login', token)
					}
					
				})
				uni.onSocketError((err) => {
					this.connecting = false
					this.connected = false
					getApp().globalData.connected = false
					uni.hideLoading()
					uni.showModal({
						content: '连接失败，服务不可用，请稍后再试',
						showCancel: false
					})
				})
				uni.onSocketClose((res) => {
					this.connected = false
					this.startRecive = false
					console.log('onClose', res)
				})
			},
		},
		onLaunch: function() {
			this.connect()
			
			request.onWs((value) => {
				if (value.url == '/appendFriend') {
					if (value.data.code) {
						// 新好友请求
						uni.showToast({
							title: '您有新的好友请求'
						})
					}
				}
			})
		},
		onShow: function() {
			
		},
		onHide: function() {
			// console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import '@/uni_modules/uni-scss/index.scss';
	/* #ifndef APP-NVUE */
	@import '@/static/customicons.css';
	// 设置整个项目的背景色
	page {
		background-color: #fbfbfb;
	}
	
	/* #endif */
	.login-page {
		background-color: #F8F8F8;
		height: 100%;
	
		.login-logo {
			padding-top: 160rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 40rpx;
	
			cover-image {
				width: 100rpx;
				height: 100rpx;
			}
		}
	
		.login-hi {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 40rpx;
	
			cover-image {
				width: 48rpx;
				height: 48rpx;
				margin-left: 10rpx;
			}
	
			text {
				font-size: 30rpx;
				color: #7F7F7F;
			}
		}
	
		.login-warp {
			width: 660rpx;
			padding: 36rpx;
			box-sizing: border-box;
			margin: 0 auto;
	
			.login-input {
				::v-deep .uni-easyinput__content {
					border-radius: 30rpx;
				}
	
				::v-deep .uni-easyinput__content-input {
					height: 90rpx;
				}
			}
	
			.login-button {
				background-color: #DEE9FF;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 30rpx;
				color: #8296FF;
				border: none;
				outline: none;
				border-radius: 30rpx;
				font-weight: bold;
				transition: all .3s;
	
				&::after {
					border: none;
				}
			}
			.login-button-hover {
				background-color: #1296db;
				color: #fff;
			}
	
			.form-bottom {
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				color: #a4a4a4;
	
				text {
					cursor: pointer;
				}
			}
		}
	}
	
	.code-btn {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		width: 200rpx;
		border-radius: 20rpx;
		background-color: #f0f2ff;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 26rpx;
		color: #8296FF;
		border: none;
		outline: none;
		text-align: center;
		font-weight: bold;
		box-sizing: border-box;
	}
	
	.home-search {
		background-color: #fff;
	}
	
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.page-search {
		background-color: #fff;
	}
	
	.page-nav-bar {
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.page-nav-bar-left {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding-left: 20rpx;
			box-sizing: border-box;
			.avatar {
				width: 65rpx;
				height: 65rpx;
				background-color: #ffffff;
				border-radius: 25rpx;
			}
			.user-name {
				font-size: 26rpx;
				color: #555555;
				font-weight: bold;
				padding-left: 20rpx;
				max-width: 200rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.page-nav-bar-right {
			padding-right: 20rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
	}
</style>
